<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!-- Bootstrap -->
    <link href="../../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../../vendors/nprogress/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
    <!-- Custom Theme Style -->
    <link href="../../vendors/custom/custom.min.css" rel="stylesheet">
    <!--Bootstrap-table-->
    <link href="../../vendors/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet">
    <link href="../../vendors/jquery/jquery.treegrid.min.css" rel="stylesheet">
    <!--kindeditor-->
    <link href="../../vendors/kindeditor/themes/default/default.css" rel="stylesheet">
    <!--自定义样式覆盖-->
    <style>
        body {
            background: #F7F7F7;
        }
    </style>
</head>
<body>

<div class="row">
    <!--页面表格-->
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <table id="table" class="table table-striped jambo_table bulk_action"></table>
            </div>
        </div>
    </div>
</div>

<!--表格 工具栏-->
<div id="toolbar">
    <div class="col-sm-10">
        <input type="button" id="J_selectImage" value="子图批量上传"/>
    </div>
</div>


<!--添加分类弹出层-->
<div class="modal fade" id="addModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">添加分类</h4>
            </div>
            <div id="alertBlock2"></div>
            <div class="modal-body">
                <form class="form-horizontal" id="form-add">
                    <input type="hidden" name="pid" id="pid-add">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">库存量：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="storenum-add" name="storenum">
                        </div>
                        <label class="col-sm-2 control-label">选择属性：</label>
                        <div class="col-sm-3">
                            <select name="vid" id="vid-add" class="form-control">
                                <option value="0" selected="selected">无</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <!--底部按钮-->
            <div class="modal-footer">
                <button type="button" id="add_submit" class="btn btn-primary">
                    <i class="fa fa-floppy-o"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<!--编辑弹出层-->
<div class="modal fade" id="tableModel">
    <div class="modal-dialog">
        <div class="modal-content message_align">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">×</span></button>
                <h4 class="modal-title">库存量修改</h4>
            </div>
            <div id="alertBlock"></div>
            <div class="modal-body">
                <form class="form-horizontal" id="form-edit">
                    <input type="hidden" name="kuid" id="kuid-edit">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">库存量：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="storenum-edit" name="storenum">
                        </div>
                    </div>
                </form>
            </div>
            <!--底部按钮-->
            <div class="modal-footer">
                <button type="button" id="edit_submit" class="btn btn-primary">
                    <i class="fa fa-floppy-o"></i> 保存
                </button>
            </div>
        </div>
    </div>
</div>

<!--JS插件引入-->

<!--jQuery -->
<script src="../../vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../../vendors/nprogress/nprogress.js"></script>
<!-- iCheck -->
<script src="../../vendors/iCheck/icheck.min.js"></script>
<!--Bootstrap-table-->
<script src="../../vendors/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="../../vendors/bootstrap-table/dist/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="../../vendors/jquery/jquery.treegrid.min.js"></script>
<script src="../../vendors/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
<!-- Custom Theme Scripts -->
<script src="../../vendors/custom/custom.min.js"></script>
<!--myself script-->
<script src="../../vendors/myself/myself.js"></script>
<!--kindeditor-->
<script src="../../vendors/kindeditor/kindeditor-all.js"></script>
<script src="../../vendors/kindeditor/lang/zh-CN.js"></script>

<script type="text/javascript">

    const $table = $('#table');

    $(function () {
        var table = new tableInit();
        table.Init();
    });

    var tableInit = function () {
        var table = new Object()
        table.Init = function () {
            $('#table').bootstrapTable({
                toolbar: '#toolbar',
                url: '/attribute/getAttributeByCid?pid=' + localStorage.getItem('pid') + '&cid=' + localStorage.getItem('cid'),
                // url: '../../testJson/a.json',
                striped: true,
                sidePagenation: 'server',
                showRefresh: true,
                // search: true,
                idField: 'tid',
                columns: [{
                    field: 'name',
                    title: '属性',
                    align: 'center',
                }, {
                    field: 'storenum',
                    title: '库存',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (row.pid == 0) {
                            return row.storenum = "";
                        } else {
                            return row.storenum;
                        }
                    }
                }, {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    events: operateEvents,
                    formatter: operateFormatter
                }],
                treeShowField: 'name',
                parentIdField: 'pid',
                onLoadSuccess: function (data) {
                    $table.treegrid({
                        initialState: 'collapsed',//收缩
                        treeColumn: 0,//指明第几列数据改为树形
                        expanderExpandedClass: 'glyphicon glyphicon-triangle-bottom',
                        expanderCollapsedClass: 'glyphicon glyphicon-triangle-right',
                        onChange: function () {
                            $table.bootstrapTable('resetWidth');
                        }
                    });
                }
            });
        }
        return table;
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return 'pageSize=' + params.limit + '&' + 'pageIndex=' + (params.offset / params.limit + 1);
    }

    // 表格操作格式化
    function operateFormatter(value, row, index) {
        if (row.pid != 0)
            return [
                '<a class="edit" href="javascript:void(0)" title="Edit">',
                '<i class="fa fa-pencil"></i>',
                '</a>  ',
            ].join('');
    }

    window.operateEvents = {
        'click .edit': function (e, value, row, index) {
            $('#kuid-edit').val(row.kuid);
            $('#storenum-edit').val(row.storenum);
            $('#tableModel').modal();
        }
    }

    $('#edit_submit').click(function () {
        var formData = $('#form-edit').serializeObject();
        $.ajax("/productkuid/updateProductkuid", {
            type: 'post',
            // datatype: 'json',
            // contentType: 'application/json',
            data: formData,
            // data: JSON.stringify(formData),
            success: function (data) {
                window.location.reload();
                $('#myAlert').alert();
            },
            error: function (data) {
                $('#alertBlock').html('<div id="myAlert" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>保存失败。 </div>');
            }
        });
    });

    $(function () {
       var  temp = '{"pid":"1","urls":["/uploadFileDir/1546864932019437.jpg","/uploadFileDir/1546864932105bce.jpg"]}';
       // console.log(JSON.parse(temp));
        // $.ajax({
        //     url:"/product/inserpics",
        //     type:"post",
        //     dataType:"json",
        //     data:JSON.parse(temp),
        //     success:function (data) {
        //         console.info("success");
        //     }
        // })

    });

    var str = '{"pid":"' + localStorage.getItem('pid')+'"';


    // 图片上传
    KindEditor.ready(function (K) {
        var editor = K.editor({
            filePostName: "file",//form 名称
            uploadJson: '/file/upload',//上传地址
        });
        K('#J_selectImage').click(function () {
            editor.loadPlugin('multiimage', function () {
                editor.plugin.multiImageDialog({
                    clickFn: function (urlList) {
                        // console.info("urlList:");
                        // console.info(urlList);
                        editor.hideDialog();

                        str = str + ',"urls":[';
                        K.each(urlList, function (i, data) {
                            if(i!=0) str+=',';
                            str = str + '"' + data.url + '"';
                        });
                        str = str + ']}';
                        console.log(str);
                        $.ajax('/product/inserpics',{
                            type: 'post',
                            // datatype: 'json',
                            // contentType: 'application/json',
                            // data: JSON.stringify(str),
                            data:JSON.parse(str),
                        });
                    }
                });
            });
        });
    });


</script>

<!--添加相关-->
<script type="text/javascript">
    // 点击添加按钮跳出模态层
    $('#add').click(function () {
        $('#category-add').html("");
        $.ajax('/attribute/getAttributeByCid', {
            type: 'get',
            success: function (data) {
                $.each(data.rows, function (i, temp) {
                    $('#category-add').append('<option value="' + temp.cid + '">' + temp.cname + '</option>')
                })
            }
        });
        $('#addModel').modal();
    });

    // 数据库添加按钮事件
    $('#add_submit').click(function () {
        itemAddEditor.sync();//同步富文本编辑框内容到textarea
        var formData = $('#form-add').serializeObject();
        $.ajax("/product/addProduct", {
            type: 'post',
            data: formData,
            success: function (data) {
                window.location.reload();
                $('#myAlert3').alert();
            },
            error: function (data) {
                $('#alertBlock3').html('<div id="myAlert3" class="alert alert-warning"> <a href="#" class="close" data-dismiss="alert">&times;</a> <strong>警告！</strong>添加失败。 </div>');
            }
        });
    });

    // 图片上传
    // KindEditor.ready(function (K) {
    //     var editor = K.editor({
    //         filePostName: "file",//form 名称
    //         uploadJson: '/file/upload',//上传地址
    //     });
    //     K('#J_selectImage').click(function () {
    //         editor.loadPlugin('multiimage', function () {
    //             editor.plugin.multiImageDialog({
    //                 clickFn: function (urlList) {
    //                     // console.info("urlList:");
    //                     // console.info(urlList);
    //                     var div = K('#J_imageView');
    //                     div.html('');
    //                     K.each(urlList, function (i, data) {
    //                         // console.info(data);
    //                         div.append('<img style="width: 150px;height: 150px" src="' + data.url + '">');
    //                         if (i == 0) {
    //                             $('#imageurl').val(data.url);
    //                         }
    //                     });
    //                     editor.hideDialog();
    //                 }
    //             });
    //         });
    //     });
    // });

</script>

</body>
</html>